<template>
	<div id="header" :class="headerCls">
		<transition name="search">
			<BaseSearch ref="searchComponent" v-show="!isSearchRoute" class="search" :hideContent="appUIStore.headerHidden || isSearchRoute"></BaseSearch>
		</transition>
		
		<div class="menu">
			<div :class="`menu-item ${matchRouteModule === 'gallery' && 'is-active'}`" @click="goGalleryView">游廊</div>
			<div :class="`menu-item ${matchRouteModule === 'workshop' && 'is-active'}`" @click="goWorkshopView">工坊</div>
		</div>
	</div>
</template>

<script>
	
	import { defineComponent, ref, computed, watch, onBeforeMount } from "vue";
	import { useRoute, useRouter } from 'vue-router';
	import useAppUI from '@/store/appUI';
	import BaseSearch from './search';
	import { throttle } from '@/utils/help';
	import plgMessage from '@/plugins/message';
	
	export default defineComponent({
		name: 'BaseHeader',
		components: {
			BaseSearch
		},
		setup(props, { attrs, slots, emit, expose }) {
			
			const route = useRoute();
			const router = useRouter();
			
			const appUIStore = useAppUI();
			
			const searchComponent = ref();
			
			const headerCls = computed(() => {
				return [
					appUIStore.headerHidden ? 'is-hidden' : 'is-show', 
					appUIStore.containerScrollTop >= 256 && 'is-out', 
					appUIStore.headerNotPlace && 'is-notplace'
				];
			})
			
			const matchRouteModule = computed(() => {
				return route.meta.nav;
			})
			
			const isSearchRoute = computed(() => {
				return route.name === 'search';
			})
			
			watch(isSearchRoute, (newIsSearchRoute, oldIsSearchRoute) => {
				if (oldIsSearchRoute) searchComponent.value.resetSearchHistory();
			})
			
			onBeforeMount(() => {
				if (!route.meta.hideHeader) appUIStore.showHeader();
				document.getElementById('app')?.addEventListener('scroll', throttle(function({ target }) {
					appUIStore[(target.scrollTop < 256 || target.scrollTop < appUIStore.containerScrollTop) ? 'showHeader' : 'hideHeader']();
					appUIStore.changeContainerScrollTop(target.scrollTop);
				}, 200));
			})
			
			function goGalleryView() {
				plgMessage.info('此页面或功能暂时关闭');
				return;
				// router.hasRoute('gallery') && router.push({ name: 'gallery' });
			}
			
			function goWorkshopView() {
				plgMessage.info('此页面或功能暂时关闭');
				return;
				// router.hasRoute('workshop') && router.push({ name: 'workshop' });
			}
			
			return {
				searchComponent,
				headerCls,
				matchRouteModule,
				isSearchRoute,
				goGalleryView, goWorkshopView,
				appUIStore
			}
		}
	})
	
</script>

<style lang="scss" scoped>
	
	#header {
		position: sticky;
		top: 0;
		z-index: 8;
		height: 64px;
		background: #fff;
		transition: all .25s ease-in-out;
		padding: 0 max(3vw, 10px);
		display: flex;
		align-items: center;
		gap: 40px;
		backdrop-filter: saturate(50%) blur(4px);
		&.is-hidden {
			transform: translateY(-64px);
			box-shadow: 0 0 0 transparent;
		}
		&.is-show {
			transform: translateY(0);
			box-shadow: 0 0 12px #e3e5e7;
		}
		&.is-out {
			// background: center / 4px 4px radial-gradient(transparent 1px, #fff 1px);
		}
		&.is-notplace {
			height: 0;
		}
	}
	
	.search {
		width: max(150px, 20%);
	}
	
	.search-enter-from,
	.search-leave-to {
		width: 0;
		opacity: 0;
	}
	
	.menu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		gap: 40px;
	}
	
	.menu-item {
		color: #676b73;
		padding: 4px;
		cursor: pointer;
		font-weight: bold;
		transition: color .25s;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			height: 0;
			width: 0;
			bottom: -4px;
			left: 50%;
			transition: width .25s, height .25s;
			transform: translateX(-50%);
			background: currentColor;
		}
		&:hover, &.is-active {
			color: #66ccff;
			&::after {
				height: 2px;
				width: 120%;
				border-radius: 1px;
			}
		}
	}
	
</style>